// 混合
@mixin flexBox($layout: center) {
  display: flex;
  align-items: $layout;
  justify-content: $layout;
}

// 混合初步使用
.box {
  @include flexBox();
}

.box {
  @include flexBox(end);
}

// @mixin respond-to($breakName) {
//   @if $breakName == 'phone' {
//     @media (min-width: 320px) and (max-width: 480px) {
//       @content;
//     }
//   } @else if $breakName == 'pad' {
//     @media (min-width: 320px) and (max-width: 480px) {
//       @content;
//     }
//   }
// }

$breakPoints: (
  'phone': (
    320px,
    480px
  ),
  'pad': (
    481px,
    768px
  ),
  'notebook': (
    769px,
    1024px
  ),
  'desktop': (
    1025px,
    1200px
  ),
  'tv': 1201px
);

@mixin respond-to($breakName: 'phone') {
  $bp: map-get($breakPoints, $breakName);
  @if type-of($bp) == 'list' {
    $min: nth($bp, 1);
    $max: nth($bp, 2);
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else {
    @media (min-width: $bp) {
      @content;
    }
  }
}

.herder {
  display: flex;
  width: 100%;

  @include respond-to('phone') {
    height: 100px;
  }
  @include respond-to('pad') {
    height: 120px;
  }
  @include respond-to('notebook') {
    height: 140px;
  }
  @include respond-to('desktop') {
    height: 160px;
  }
  @include respond-to('tv') {
    height: 180px;
  }
}

h1, p {
  @include respond-to('phone') {
    color: #f00;
  }
  @include respond-to('pad') {
    color: #00f;
  }
  @include respond-to('notebook') {
    color: #ff0;
  }
  @include respond-to('desktop') {
    color: #f0f;
  }
  @include respond-to('tv') {
    color: #0f0;
  }
}
